<template>
  <div class="flex" style="width: 100%;flex-direction: column;height: 100vh;">
    <div  style="height: 20%;"></div>
    <div style="width: 100%;height: 300px;text-align: center;">
      <div style="width: 400px;margin: 0 auto;">
        <el-card>
          <template #header>
            <h1 style="color: #656D78;">三智配送</h1>
          </template>
          <div class="mt20"></div>
          <j-form ref="jFromRef" :rule="rule"></j-form>
          <div style="margin-top: 30px;">
            <lbtn   @click="submitForm" type="primary" size="large" style="width: 100%">登 录</lbtn >
          </div>
          <div class="mt20"></div>
        </el-card>
      </div>
    </div>
    <div  style="flex: 1;"></div>
  </div>
</template>

<script>
import tool from '@/utils/tool.js'
import Cookies from "js-cookie";
export default {
  name: "login",
  data () {
    return {
      model: {
        username: '',
        userpwd: '',
      },
      src: '',
      rule: [
        {
          type: 'input',
          field: 'username',
          title: '用户名',
          effect: {required: true},
          props: {
            size: 'large'
          },
          inject: true,
          nativeOn: {
            keydown: (inject, e) => {
              if(e.key === 'Enter') {
                if(inject.$f.getValue('username')){
                  inject.$f.exec('userpwd', 'focus')
                } else {
                  tool.err('用户名不能为空')
                }

              }
            }
          }
        },
        {
          type: 'input',
          field: 'userpwd',
          title: '密码',
          effect: {required: true},
          props: {
            type: 'password',
            size: 'large'
          },
          inject: true,
          nativeOn: {
            keydown: (inject, e) => {
              if(e.key === 'Enter') {
                if(inject.$f.getValue('username') && inject.$f.getValue('userpwd')) {
                  this.submitForm()
                } else {
                  tool.err('用户名密码不能为空')
                }
              }
            }
          }
        }
      ],
      isApp: false
    }
  },
  mounted() {
    let token = tool.Session.get('token')
    let user = tool.data.getUser()
    if(token && user) {
      // this.$router.push({name: 'cargoquick'})
    }
    let userAgent = navigator.userAgent.toLowerCase()
    if (userAgent.indexOf(' electron/') > -1){
      this.isApp = true
    }
  },
  methods: {
    reload() {
      let set = window.localStorage.getItem("toreload");
      if (!set) {
        window.localStorage.setItem("toreload", 'reloaded')
        window.location.reload()
      }
      setTimeout(() => {
        window.localStorage.removeItem("toreload")
      }, 5000)
    },
    submitForm () {
      this.$refs.jFromRef.fApi.submit(formData => {
        let obj = {
          username: formData.username,
          userpwd: tool.crypto.MD5(formData.userpwd)
        }
        tool.post('user/login', obj).then(ret => {
          if (ret.stat) {
            let info = ret.data
            tool.data.setUser(info)
            // 存储 token 到浏览器缓存
            tool.Session.set('token', info.token);
            // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/store/userInfo.ts` 中不同用户登录判断（模拟数据）
            Cookies.set('username', info.username);
            setTimeout(() => {
              this.$router.push({name: 'cargoquick'})
            }, 300)
          }
        })
      })
    },
    logout () {
      window.close()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
